// import React from 'react'
// import './ArticleLists.css'

// import { Select, Input, Button, Table, Switch } from 'antd';
// // 下拉框
// const { Option } = Select;
// // 表格
// const columns = [
//   {
//     title: '文章标题',
//     dataIndex: 'name',
//   },
//   {
//     title: '分类名称',
//     dataIndex: 'age',
//   },
//   {
//     title: '是否显示',
//     // dataIndex: 'address',
//     render: () => <Switch defaultChecked />
//   },
//   {
//     title: '添加时间',
//     dataIndex: 'address',
//   },
//   {
//     title: '操作',
//     key: 'operation',
//     fixed: 'right',
//     width: 100,
//     render: () => <div style={{ color: '#4E6EF2' }}><span >修改</span> <span >删除</span></div>,
//   },
// ];
// const data = [];
// for (let i = 0; i < 30; i++) {
//   data.push({
//     key: i,
//     name: `Edward King ${i}`,
//     age: 32,
//     address: `London, Park Lane no. ${i}`,
//   });
// }





// class ArticleLists extends React.Component {
//   constructor() {
//     super()

//   }
//   // 下拉框
//   onChange = (value) => {
//     console.log(`selected ${value}`);
//   }

//   onBlur = () => {
//     console.log('blur');
//   }

//   onFocus = () => {
//     console.log('focus');
//   }

//   onSearch = (val) => {
//     console.log('search:', val);
//   }
//   // 表格的开关
//   onChangeSwitch = (checked) => {
//     console.log(`switch to ${checked}`);
//   }

//   // 表格
//   state = {
//     selectedRowKeys: [], // Check here to configure the default column
//   };

//   // onSelectChange = selectedRowKeys => {
//   //   console.log('selectedRowKeys changed: ', selectedRowKeys);
//   //   this.setState({ selectedRowKeys });
//   // };


//   render() {
//     // 表格
//     const { selectedRowKeys } = this.state;
//     const rowSelection = {
//       selectedRowKeys,
//       onChange: this.onSelectChange,
//       selections: [
//         Table.SELECTION_ALL,
//         Table.SELECTION_INVERT,
//         {
//           key: 'odd',
//           text: 'Select Odd Row',
//           onSelect: changableRowKeys => {
//             let newSelectedRowKeys = [];
//             newSelectedRowKeys = changableRowKeys.filter((key, index) => {
//               if (index % 2 !== 0) {
//                 return false;
//               }
//               return true;
//             });
//             this.setState({ selectedRowKeys: newSelectedRowKeys });
//           },
//         },
//         {
//           key: 'even',
//           text: 'Select Even Row',
//           onSelect: changableRowKeys => {
//             let newSelectedRowKeys = [];
//             newSelectedRowKeys = changableRowKeys.filter((key, index) => {
//               if (index % 2 !== 0) {
//                 return true;
//               }
//               return false;
//             });
//             this.setState({ selectedRowKeys: newSelectedRowKeys });
//           },
//         },
//       ],
//     };



//     return (
//       <div className='ArticleLists'>
//         <h1>我是文章列表</h1>
//         <div className='erji'><h3>文章管理</h3><h3>新增文章</h3></div>
//         <div>
//           <Select
//             showSearch
//             style={{ width: 200, margin: '0.5rem' }}
//             placeholder="Select a person"
//             optionFilterProp="children"
//             onChange={this.onChange}
//             onFocus={this.onFocus}
//             onBlur={this.onBlur}
//             onSearch={this.onSearch}
//             filterOption={(input, option) =>
//               option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
//             }
//           >
//             <Option value="jack">Jack</Option>
//             <Option value="lucy">Lucy</Option>
//             <Option value="tom">Tom</Option>
//           </Select>
//           <div className='shousuo'>
//             <span>文章标题</span>
//             <Input placeholder="Basic usage" />
//             <Button type="primary">搜索</Button>
//             <Button type="primary">批量删除</Button>
//           </div>

//         </div>
//         <div className='myTable'>


//           <Table pagination={false} rowSelection={rowSelection} columns={columns} dataSource={data} />


//         </div>



//       </div>

//     )
//   }

// }

// export default ArticleLists

import React from 'react'
import './AdvertisingList.css'

 import {Layout,Menu} from 'antd'
 import {NavLink} from 'react-router-dom'

 const  {Content,Header} = Layout;

class  ArticleLists  extends React.Component{
         
    render(){
        return(
            <Layout>
              <Header style={{height:'auto'}}>
                <h1 className='title'>文章列表</h1>
               <Menu 
               className='nav'
               mode='horizontal'
               style={{background:'transparent'}}
               >
                 <Menu.Item key='1'>
                     <NavLink to='/Home/wangZhan/ArticleLists/ArticleListsTable'>文章管理</NavLink>
                     </Menu.Item>   
                     <Menu.Item key='2'>
                     <NavLink to='/Home/wangZhan/ArticleLists/NewArticles'>新增文章</NavLink>
                     </Menu.Item>   
               </Menu>
              </Header>
              <Content>
                {this.props.children}
              </Content>
            </Layout>
        )
    }

}

export default  ArticleLists









